<html>
<head>
<title>Srinivas's js experiments</title>
<script type="text/javascript">
var intervalTimer;
function go() {
    intervalTimer = setInterval(animate, 5);
    var linear = document.getElementById("linear");
    var smooth = document.getElementById("smooth");
    var x = 0;
    var scale = 100;
    var add;

    function animate() {
        linear.style.left = x + "px";

       
        var y = (0.5 * Math.cos(x / scale * Math.PI)) + 0.5;

       
        var inverse = 1 - y;

       
        var smoothPos = inverse * scale;
        smooth.style.left = smoothPos + "px";

        if (x == scale) {
            add = false;
        } else if (x == 0) {
            add = true;
        }


        if (add) {
            x++;
        } else {
            x--;
        }
    }
}

function stop() {
    clearInterval(intervalTimer);
}
</script>
</head>

<body onload="go();">
    <button id="linear" style="position:absolute; width:75px;" onclick="stop();">linear</button>
    <br/>
    <br/>
    <button id="smooth" style="position:absolute; width:75px;" onclick="stop();">smooth</button>
</body>
</html>
